<template>
  <div class="overviewButtonGroup">
    <div class="top">
         <div class="vedio">
           <span>视屏</span>
         </div>
      <div class="music">
        <span>音频</span>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers(
  "overview/buttonGroup"
);
// import {fetchOverview} from '@/api'
export default {
  data() {
    return {
      msg: "Welcome to Your App"
    };
  },
  computed: {
    ...mapState([
      "musicIsPlay",
      "vedioIsPlay",
      "musicButtonIsActivety",
      "vedioButtonIsActivety"
    ])
  },
  mounted() {


  },
  created() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.overviewButtonGroup {
    position: absolute;
    bottom: 0.48rem;
    right: 0.3rem;
  .top {
     position: relative;
    font-size: 0.1rem;
    div {
      width: 0.68rem;
      height: 0.68rem;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: 200% 100%;
      background-position: 100% 100%;
      position: relative;
      span {
        font-size: 0.18rem;
        display: block;
        color: white;
        position: absolute;
        bottom: -0.28rem;
        width: 100%;
      }
    }
    .music {
      background-image: url("../assets/ico_sound.png");
    }
    .vedio {
      background-image: url("../assets/ico_video.png");
    }
    .isActive {
      background-position: 0% 0%;
    }
  }
}
</style>
